<template>
  <Modal v-model="modal" fullscreen :title="title" class-name='fullscreen-modal'>
    <Container class="storesign-edit" v-if="modal">
        <Tabs v-model="tab" type="card" size="small">
        <TabPane :label="renderLabel('门店信息', isInfoChange)" name="tab1" />
        <TabPane :label="renderLabel('门店照片', storePicChange)" name="tab2" />
        <TabPane :label="renderLabel('门店证件', idPicChange)" name="tab3" />
        <TabPane :label="renderLabel('签约记录')" name="tab4" />
        <TabPane :label="renderLabel('扫码地址')" name="tab5" />
        <TabPane :label="renderLabel('审核进度')" name="tab6" />
        </Tabs>
        <div class="tab-content">
          <StoreInfoItem :form="form" v-show="tab=='tab1'"  />
          <StorePictures :form="form" v-if="tab=='tab2'"  />
          <IDcardPictures :form="form" v-if="tab=='tab3'"  />
          <SignRecordItem :form="form" v-if="tab=='tab4'"  />
          <AddressMap :isEdit='false' :form="form" v-if="tab=='tab5'"  />
          <ProgressItem :form="form" :applyId="applyId" v-if="tab=='tab6'"  />
        </div>
    </Container>
  </Modal>
</template>
<script>
  import StoreInfoItem from "./StoreInfoItem";
  import StorePictures from './StorePicturesItem'
  import SignRecordItem from './SignRecordItem'
  import AddressMap from './AddressMapItem'
  import IDcardPictures from './IDcardPicturesItem'
  import ProgressItem from './ProgressItem'

  export default {
    name: "",
    components: {
      StoreInfoItem,
      StorePictures,
      SignRecordItem,
      AddressMap,
      IDcardPictures,
      ProgressItem
    },
    data() {
      return {
        tab: 'tab1',
        modal: false,
        title: '变更详情',
        curLog: {},
        cur: null,
        pre: null,
        form: {
          cardz: [],
          cardf: [],
          yyzz: [],
          storeContractAgreementDTOList: [],
          storeContractChangeLogDTOList: [],
          storeContractDTO: {
            distributorId: '',
            distributorName: '',
            storeContractBrandDTOList: [],
            storeContractAgreementDTO: {}
          },
          storeDTO: {}
        },
        renderLabel: (text, changed) => {
          return (h)=> {
            return <span class={changed?'font-pink':''}>{text}</span>
          }
        },
        applyId: ''
      }
    },
    computed: {
      isInfoChange() {
        let ishave = false
        let info = this.form.storeContractDTO
        let val = [
          'storeNameOrg', 'distributorNameOrg', 'storeTypeNameOrg', 'storeTaskQuantityOrg', 'storeNoOrg', 'contractStatusStrOrg', 'salesmanNameOrg', 
          'ownerBirthdayOrg', 'storePhoneOrg', 'maxRebateQuantityOrg', 'maxPurchaseQuantityIntegralOrg', 'maxFundQuantityOrg', 'inRebateExpiredDaysOrg',
          'scanDistanceRangeOrg', 'unitFundOrg'
        ]
        let bv = [
          'isOpenFundOrg', 'isOpenInspectionOrg', 'isOpenProtectionClaimsOrg', 'isOpenCreditAccountOrg'
        ]
        ishave =  !!val.find(item => info[item])
        ishave = !!bv.find(item => (info[item] === true || info[item] === false))
        return ishave
      },
      storePicChange() {
        let imgs = this.form.storeContractDTO.storeContractExtDTO
        return imgs.headImageUrlOrg || imgs.shelfImageUrlOrg || imgs.hangerImageUrlOrg || imgs.stationImageUrlOrg || imgs.posterImageUrlOrg
      },
      idPicChange() {
        let imgs = this.form.storeContractDTO.storeContractExtDTO
        return imgs.ownerIdcardPositiveImageUrlOrg || imgs.ownerIdcardNegativeImageUrlOrg || imgs.businessLicenseImageUrlOrg
      }
    },
    mounted() {
    },
    methods: {
      getData() {
        if (!this.curLog.id) return
        this.$ajaxGet(`/contract_store/detail_changelog/detail/${this.curLog.contractId}/${this.curLog.id}`).then(res => {
          let logList = res.storeContractChangeLogDTOList
          this.cur = logList[0].storeContractLogDTO
          this.applyId = logList[0].applyId
          this.pre = logList[1] ? logList[1].storeContractLogDTO : null
          this.compareValue(this.cur, this.pre)
          this.form = Object.assign(this.form, {
            storeContractDTO: this.cur,
            storeDTO: res.storeDTO,
            idPhoneLogList: res.idPhoneLogList
          })
          if (!this.form.storeContractDTO.storeContractExtDTO) {
            this.form.storeContractDTO.storeContractExtDTO = {}
          }
          if (!this.form.storeContractDTO.storeContractAgreementDTO) {
            this.form.storeContractDTO.storeContractAgreementDTO = {}
          }
        })
      },
      compareValue(cur, pre) {
        if (!pre) return
        for (let i in cur) {
          if (cur[i] && Object.prototype.toString.call(cur[i]) != "[object Object]" && cur[i] != pre[i]) {
            cur[`${i}Org`] = pre[i]
          }
        }
        this.compareValue(cur.storeContractExtDTO, pre.storeContractExtDTO)
      },
      openModal(item) {
        // this.form.storeContractDTO = Object.assign(this.form.storeContractDTO, item.storeContractLogDTO)
        this.curLog = item
        this.modal = true;
        this.form.storeContractDTO.storeContractExtDTO = {}
        this.getData()
      },
      closeModal() {
        this.modal = false;
      },
    }
  };
</script>
